<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {

            height: 100px;
            position: absolute;
            left: 0;
        }

        .div_static {
            width: 600px;
            background-color: #000000;
            top: 10%;
        }

        /**
         贝塞尔曲线在线生成
          https://cubic-bezier.com/
          css的自定义transition-timing-function 好像也就只能用贝塞尔曲线了
          复杂的效果可以分段定义动画
        **/
        .div_move {
            width: 100px;
            animation: melon 2s infinite cubic-bezier(.89,1.13,.94,1.95);
            /*animation: melon 2s infinite step-end;*/
            /*animation: melon 2s infinite step-start;*/
            /*animation: melon 2s infinite steps(3);*/
            top: 30%;
            background-color: #87CEEB;
        }

        @keyframes melon {
            0% {
                left: 0;
            }

            /* 20% {
                left: 100px;
            }

            40% {
                left: 200px;
            }

            60% {
                left: 300px;
            }

            80% {
                left: 400px;
            } */

            100% {
                left: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="div_static"></div>
    <div class="div_move"></div>
</body>

</html>